/**
 * 测点规则=> 区域管理
 *
 * **/
import React, {Component} from 'react';
import {connect} from 'dva';
import Container from '../../../components/Container'
import Filtrate from '../../../components/Filtrate'
import MyTable from '../../../components/MyTable'
import config from '../../../config'
import MyIcon from '../../../components/MyIcon'
import PublicService from '../../../services/PublicService'
import MyModel from '../../../components/MyModel'
import {Modal, Row, Col, Input, Form} from 'antd';
import './observeManage.less'

const FormItem = Form.Item;
const formItemLayout = {
  labelCol: {span: 24},
  wrapperCol: {span: 24}
};

class ObserveManage extends Component {
  state = {

  };
  componentDidMount(){
    this.props.dispatch({type:'observeManage/getPageList'});
  }
  onSelectChange(selectedRowKeys,selectedRow) {
    this.props.dispatch({type:'observeManage/saveInfo',payload:{selectedRows:selectedRowKeys}})
  }

  modalCancel() {
    this.props.dispatch({type: 'observeManage/saveInfo', payload: {isVisible: false}})
  }

  modalSave() {
    let params = this.props.form.getFieldsValue();
    console.log(params);

    this.props.dispatch({type: 'observeManage/submit', payload: {params}})
  }

  addHandle() {
    this.props.dispatch({type: 'observeManage/saveInfo', payload: {isVisible: true}})

  }

  addLineHandle(child){
    this.props.dispatch({type: 'observeManage/addLine'})

  }

  deleteHandle(){
    this.props.dispatch({type:'observeManage/deleteHandle'})
  }

  deleteLineHandle(child){
    console.log(child);
    this.props.dispatch({type: 'observeManage/deleteLine',payload:child})
  }
  onChangePage(page,size){
    this.props.dispatch({type:'observeManage/pageChangeHandle',payload:{page,size}})
  }

  edit(record){
    console.log(record);
    this.props.dispatch({type:'observeManage/editReadHandle',payload:{record:record,isEdit:false,isVisible:true}})
  }
  read(record){
    console.log(record);
    this.props.dispatch({type:'observeManage/editReadHandle',payload:{record:record,isEdit:true,isVisible:true}})
  }
  search(data){
    this.props.dispatch({type:'observeManage/search',payload:data})
  }
  submit(data){
    console.log(data);
    this.props.dispatch({type:'observeManage/search',payload:data})
  }
  render() {
    let t = this;
    let {selectedRows} = this.props;
    let {getFieldDecorator} = this.props.form;
    let rowSelection = {
      selectedRowKeys:selectedRows,
      onChange: this.onSelectChange.bind(this),
    };
    let columns = [
      {
        dataIndex: 'num',
        key: 'num',
        title: '序号',
        width: 50
      },
      {
        dataIndex: 'observeName',
        key: 'observeName',
        title: '观察项名称',
        width: 150
      },
      {
        dataIndex: 'handle',
        key: 'handle',
        title: '选项',
        width: 80,
        render(text, record) {
          return (
            <div>
              <MyIcon type="icon-chakan" onClick={t.read.bind(t, record)}
                      style={{fontSize: 18, color: '#16b8be', verticalAlign: 'center'}}/>
              <span style={{position: 'relative', bottom: 2}}> | </span>
              <MyIcon type="icon-bianji"
                      onClick={t.edit.bind(t, record)}
                      style={{
                        fontSize: 18,
                        color: '#16b8be',
                        marginLeft: 2
                      }}/>
            </div>

          )
        }
      },
    ];
    let itemsModal = [
      {
        title: '',
        sub: [
          {
            type: 'input',
            label: `类别名称`,
            paramName: 'observeName',
            initialValue: this.props.initData.observeName,
            span: 12,
            width: 210,
            rules: [],
            // addonAfter: '后缀'
          },
          {
            type: 'inputMulti',
          },
        ]
      }
    ];
    let items = [
      {
        type: 'input',
        label: '区域名称:',
        placeholder: '请输入 ..',
        paramName: 'observeName',
      }
    ];
    let height = document.body.clientHeight;
    return (
      <div>
        <Filtrate
          submit={this.submit.bind(this)}
          items={items}/>
        <Container
          addBtnShow
          addBtn={this.addHandle.bind(this)}
          deleteBtnShow
          deleteBtn={this.deleteHandle.bind(this)}
        >
          <MyTable
            columns={columns}
            dataSource={PublicService.transformArrayData(this.props.dataSource,true,false,this.props.page,this.props.size)}
            scroll={{y: height - 317}}
            rowSelection={rowSelection}
            loading={this.props.loading}
            rowKey="id"
            pagination={{
              size: config.size,
              pageSize:this.props.size,
              total:this.props.total,
              current:this.props.page,
              showQuickJumper: true,
              onChange:this.onChangePage.bind(this)
            }}
          />
        </Container>
        <Modal
          title={this.props.isEdit ? '查看' :this.props.initData.id ? '编辑': '新增'}
          visible={this.props.visible}
          width={590}
          className={this.props.isEdit ? 'xnw-modal xnw-clearBorder xnw-missAdd' :'xnw-modal'}
          onCancel={this.modalCancel.bind(this)}
          onOk={this.modalSave.bind(this)}
        >
          <div className="">
            {itemsModal.map((item, index) => {
              return (
                <Row key={index}>
                  {
                    item.title &&
                    <div className="wp-tab t-MB10">
                      <div className="wp-tab-header" style={{minWidth: 86}}>
                        <span>{item.title}</span>
                      </div>
                    </div>
                  }
                  {
                    item.sub.map((sub, index2) => {
                      if (sub.type === 'input') {
                        return (
                          <Col span={sub.span} key={index2} offset={sub.offset}>
                            <FormItem  {...formItemLayout} label={sub.label}>
                              {
                                getFieldDecorator(sub.paramName, {
                                  initialValue: sub.initialValue,
                                  rules: sub.rules
                                })(
                                  <Input
                                    disabled={this.props.isEdit}
                                    addonAfter={sub.addonAfter || ''}
                                    style={{width: sub.width, marginTop: 5}}
                                    size={config.size}/>
                                )
                              }
                            </FormItem>
                          </Col>
                        )
                      }
                      else if (sub.type === 'inputMulti') {
                        return (
                          this.props.inputChildren.map((child, index3) => {
                            return (
                              <Col span={child.span} key={index3} offset={child.offset} className="xnw-hover">
                                <FormItem  {...formItemLayout} label={child.label}>
                                  {
                                    getFieldDecorator(child.paramName, {
                                      initialValue: child.initialValue,
                                      rules: child.rules
                                    })(
                                      <Input
                                        disabled={this.props.isEdit}
                                        addonAfter={child.addonAfter || ''}
                                        style={{width: child.width, marginTop: 5}}
                                        size={config.size}/>
                                    )
                                  }
                                  {child.isAdd ?
                                    <span className="xnw-addBtn">
                                      <MyIcon type="icon-jian" onClick={this.deleteLineHandle.bind(this,child)} style={{color: '#FF5464', fontSize: 16, marginLeft: 5}}/>
                                      <MyIcon type="icon-jia" onClick={this.addLineHandle.bind(this,child)} style={{color: '#549FFF', fontSize: 16, marginLeft: 5}}/>
                                    </span> :
                                    <MyIcon type="icon-jian" onClick={this.deleteLineHandle.bind(this,child)} style={{color: '#FF5464', fontSize: 16, marginLeft: 5}}/>

                                  }
                                </FormItem>
                              </Col>
                            )
                          })
                        )
                      }
                    })
                  }
                </Row>
              )
            })}
          </div>
        </Modal>
      </div>
    )
  }
}

function mapStateToProps(state) {
  return {
    visible: state.observeManage.isVisible,
    inputChildren: state.observeManage.inputChildren,
    selectedRows: state.observeManage.selectedRows,
    loading: state.observeManage.loading,
    dataSource: state.observeManage.dataSource,
    size: state.observeManage.size,
    page: state.observeManage.page,
    total: state.observeManage.total,
    initData: state.observeManage.initData,
    isEdit: state.observeManage.isEdit,
  }
}

export default connect(mapStateToProps)(Form.create()(ObserveManage))


